<template>
  <div class="messageMask" v-show="isShowBox">
    <div class="messageBox absmiddle">
      <div class="messageBoxTitle">
        <p>{{messageTitle}}</p>
      </div>
      <div class="messageBoxContent relative">
        <Icon type="android-alert" class="warning"></Icon>
        <div class="messageInfo" :class="{displayFlex:messageContent.length==1}">
          <p v-for="infoItem in messageContent">{{infoItem}}</p>
        </div>
      </div>
      <div class="messageBoxFooter">
        <p class="cancleMessage">取 消</p>
        <p class="confirmMessage">确 定</p>
      </div>
    </div>
  </div>
</template>

<script>
  import "./main.scss"
  import {mapState} from 'vuex';

  export default {
    data() {
      return {
        isShowBox: false,
        messageTitle: '温馨提示',
        messageContent: [],
      }
    },
    computed: {
      ...mapState({
        messageBoxInfo: state => state.mutations.messageBoxInfo,
      }),
    },
    mounted() {},
    activated() {},
    deactivated() {},
    methods: {
      init() {
        this.messageTitle = this.messageBoxInfo.title || '温馨提示';
        this.messageContent = this.messageBoxInfo.content || [];
      },
      closeBox() {
        this.isShowBox = false;
      },
    },
    components: {},
    watch: {
      'messageBoxInfo'() {
        this.init();
      }
    }
  }
</script>
